<template>
  <header class="header">
    <!-- 左边logo -->
    <div class="logo">
      <img
        src="http://www.jz5158.cn/static/images/%E5%88%87%E5%9B%BE/logo.png"
        alt="logo"
      />
    </div>
    <!-- 右边更多 -->
    <div class="gengduo">
      <span class="gd">+</span>
      <!-- 悬浮出现 -->
      <div class="navbar">
        <ul class="nav">
          <li>
            <a href="#">首页</a>
            <span>></span>
          </li>
          <li>
            <a href="#">产品中心</a>
            <span>+</span>
          </li>
          <li>
            <a href="#">支持下载</a>
            <span>+</span>
          </li>
          <li>
            <a href="#">视频中心</a>
            <span>+</span>
          </li>
          <li>
            <a href="#">新闻中心</a>
            <span>+</span>
          </li>
          <li>
            <a href="#">关于机智</a>
            <span>+</span>
          </li>
        </ul>
        <div class="qr">
          <div>
            <img
              src="http://www.jz5158.cn/move/static/images/register/%E6%9C%BA%E6%99%BA%E8%B4%A2%E7%BB%8F%E5%85%AC%E4%BC%97%E5%8F%B7.png"
              alt=""
            />
          </div>
          <div class="number">
            <h3>4008-3132-58</h3>
            <p>周一至周日 9:00-18:30</p>
            <p class="lxqr">
              <img
                src="http://www.jz5158.cn/move/static/images/%E8%81%94%E7%B3%BB%E5%AE%A2%E6%9C%8D2.png"
                alt=""
              />
              联系客服
            </p>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>
<style lang="scss">
//让当前样式只对当前组件生效
.header {
  width: 38rem;
  height: 4.5rem;
  padding: 0.8rem 1.5rem;

  display: flex;
  justify-content: space-between;
  .logo {
    width: 12rem;
    height: 4rem;
    margin-top: 0.5rem;
  }
  img {
    height: 4rem;
  }
}
.gengduo {
  width: 3.2rem;
  height: 3.2rem;
  .gd {
    width: 3.2rem;
    height: 3.2rem;
    display: inline-block;
    line-height: 3.2rem;
    text-align: center;
    font-size: 30px;
  }
  .gd:hover + .navbar {
    display: block;
  }
  .navbar {
    width: 41.4rem;
    height: 73.6rem;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 6.1rem;
    left: 0;
    display: none;
    .nav {
      width: 100%;
      padding: 0 1.5rem;
      box-sizing: border-box;
      background: #fff;
      position: relative;
      z-index: 100;
      li {
        height: 3.2rem;
        color: #000;
        display: flex;
        justify-content: space-between;
        a {
          color: #000;
        }
      }
    }
    .qr {
      width: 100%;
      padding: 0 1.5rem;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      justify-content: space-between;
      color: #212529;
      position: relative;
      z-index: 100;
      img {
        width: 15rem;
        height: 15rem;
      }
      .number {
        text-align: center;
        h3 {
          font-weight: normal;
        }
        p {
          margin-top: 1rem;
          img {
            width: 3.6rem;
            height: 1.9rem;
            vertical-align: middle;
          }
        }
        .lxqr {
          width: 14.5rem;
          height: 2.8rem;
          border: 2px solid #0c5460;
          border-radius: 3px;
          line-height: 2.8rem;
        }
      }
    }
  }
}
</style>
